<template>
  <view class="detail-container">
    <up-navbar
      :title="`${country.name}留学`"
      :fixed="true"
      safeAreaInsetTop
      placeholder
      auto-back
    ></up-navbar>
    <!-- 国家基本信息 -->
    <view class="country-header">
      <image
        class="country-banner"
        :src="country.banner"
        mode="widthFix"
      ></image>
      <view class="country-info">
        <image
          class="country-flag"
          :src="country.flag"
          mode="aspectFill"
        ></image>
        <view class="country-name">{{ country.name }}</view>
      </view>
    </view>

    <!-- 优化学历选择tabs -->
    <view class="education-tabs">
      <view
        class="tab-item"
        v-for="(item, index) in educationList"
        :key="index"
        :class="{ active: currentEdu === index }"
        @click="changeEdu({ index })"
        >{{ item.name }}</view
      >
    </view>

    <!-- 费用信息 -->
    <view class="section">
      <view class="section-title">费用信息</view>
      <view class="fee-item">
        <text class="fee-label">留学费用：</text>
        <text class="fee-value">{{ currentFee.tuition }}</text>
      </view>
      <view class="fee-item">
        <text class="fee-label">生活费：</text>
        <text class="fee-value">{{ currentFee.living }}</text>
      </view>
    </view>

    <!-- 优势 -->
    <view class="section">
      <view class="section-title">留学优势</view>
      <view class="advantage-list">
        <view
          class="advantage-item"
          v-for="(item, index) in country.advantages"
          :key="index"
        >
          <up-icon
            name="checkmark-circle-fill"
            color="#3c9cff"
            size="18"
          ></up-icon>
          <text>{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 入学方式选择 -->
    <view class="section">
      <view class="section-title">入学方式</view>
      <view class="option-group">
        <text class="option-label">住宿类型：</text>
        <up-radio-group v-model="accommodation">
          <up-radio label="寄宿制" name="boarding"></up-radio>
          <up-radio label="走读制" name="day"></up-radio>
        </up-radio-group>
      </view>

      <view class="option-group">
        <text class="option-label">入学时间：</text>
        <up-radio-group v-model="enrollmentTime">
          <up-radio label="春季入学" name="spring"></up-radio>
          <up-radio label="秋季入学" name="autumn"></up-radio>
        </up-radio-group>
      </view>

      <view class="option-group">
        <text class="option-label">入学年份：</text>
        <up-radio-group v-model="enrollmentYear">
          <up-radio label="今年" name="current"></up-radio>
          <up-radio label="明年" name="next"></up-radio>
        </up-radio-group>
      </view>
    </view>

    <!-- 入学流程 - grid布局 -->
    <view class="section">
      <view class="section-title">
        {{ enrollmentYear === "current" ? "今年" : "明年" }}入学流程
      </view>
      <view class="process-grid">
        <view
          class="process-card"
          v-for="(step, index) in enrollmentProcess"
          :key="index"
          @click="showProcessDetail(step)"
          :class="{ active: activeProcess === index }"
        >
          <view class="card-index">{{ index + 1 }}</view>
          <view class="card-content">{{ step.split(" ")[0] }}</view>
        </view>
      </view>
    </view>

    <!-- 优化后的流程详情弹窗 -->
    <up-popup :show="showDetail" mode="center" round="20">
      <view class="process-modal">
        <view class="modal-header">
          <text class="modal-title">入学流程详情</text>
          <up-icon
            name="close-circle"
            size="24"
            color="#999"
            @click="showDetail = false"
          ></up-icon>
        </view>
        <view class="modal-content">
          <view class="process-step">
            <view class="step-index">{{
              (activeProcess + 1).toString().padStart(2, "0")
            }}</view>
            <view class="step-title">{{ currentDetail.split(" ")[0] }}</view>
            <view class="step-time">{{
              currentDetail.match(/(\d+-\d+月)/)?.[0] || ""
            }}</view>
            <view class="step-desc">{{
              currentDetail.replace(/(\d+-\d+月)/, "").trim()
            }}</view>
          </view>
          <view class="process-tips">
            <view class="tips-title">注意事项</view>
            <view
              class="tips-item"
              v-for="(tip, index) in getProcessTips(currentDetail)"
              :key="index"
            >
              <up-icon name="info-circle" size="18" color="#3c9cff"></up-icon>
              <text>{{ tip }}</text>
            </view>
          </view>
        </view>
        <up-button
          type="primary"
          text="我知道了"
          @click="showDetail = false"
          customStyle="margin-top: 30rpx"
        ></up-button>
      </view>
    </up-popup>

    <!-- 底部按钮 -->
    <view class="footer-buttons">
      <up-button
        type="primary"
        shape="circle"
        text="我要评估"
        @click="evaluate"
      ></up-button>
      <up-button text="免费咨询" shape="circle" @click="consult"></up-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import bg from "@/static/images/85f83654638ed1c1c3cebd5abadaa526.jpeg";

// 国家数据
const country = ref({
  name: "美国",
  flag: "/static/images/flags/us.png",
  banner: bg,
  advantages: ["顶尖大学", "就业机会多", "奖学金丰富"],
  fees: {
    highSchool: { tuition: "￥20-40万/年", living: "￥10-15万/年" },
    undergraduate: { tuition: "￥25-50万/年", living: "￥12-18万/年" },
    postgraduate: { tuition: "￥30-60万/年", living: "￥15-20万/年" },
  },
  process: {
    current: ["准备材料", "申请学校", "办理签证", "入学"],
    next: ["准备材料", "申请学校", "办理签证", "入学"],
  },
});

// 学历选项
const educationList = ref([
  { name: "高中" },
  { name: "本科" },
  { name: "研究生" },
]);

type EdutypeEnum = keyof typeof country.value.fees;

const eduTypes: EdutypeEnum[] = ["highSchool", "undergraduate", "postgraduate"];

const currentEdu = ref<number>(0);

type EnrollmentYearTypeEnum = keyof typeof country.value.process;

// 入学选项
const accommodation = ref("boarding");
const enrollmentTime = ref("autumn");
const enrollmentYear = ref<EnrollmentYearTypeEnum>("current");

// 计算属性
const currentFee = computed(() => {
  return country.value.fees[eduTypes[currentEdu.value]];
});

const enrollmentProcess = computed(() => {
  return country.value.process[enrollmentYear.value];
});

// 方法
function changeEdu(e: any) {
  currentEdu.value = e.index;
}

function evaluate() {
  uni.showToast({ title: "评估功能开发中", icon: "none" });
}

function consult() {
  uni.makePhoneCall({ phoneNumber: "400-123-4567" });
}

// 页面加载
onLoad((options: any) => {
  if (options.country) {
    // 这里可以根据传入的国家参数加载不同国家的数据
  }
});

// 新增activeProcess和showDetail状态
const activeProcess = ref(-1);
const showDetail = ref(false);
const currentDetail = ref("");

function showProcessDetail(step: string) {
  currentDetail.value = step;
  showDetail.value = true;
}

// 新增方法 - 根据流程步骤返回对应的提示
function getProcessTips(step: string) {
  const tipsMap: Record<string, string[]> = {
    准备材料: [
      "确保所有材料都是最新版本",
      "公证材料需要提前准备",
      "翻译件需由专业机构认证",
    ],
    申请学校: [
      "注意各学校的申请截止日期",
      "推荐信需提前联系推荐人",
      "个人陈述要突出个人特色",
    ],
    办理签证: ["签证材料需真实有效", "面试前做好充分准备", "注意签证办理周期"],
    入学: ["提前安排好住宿和机票", "了解学校的接机服务", "准备好入学所需物品"],
  };

  const stepKey = step.split(" ")[0];
  return tipsMap[stepKey] || ["暂无特别注意事项"];
}
</script>

<style scoped lang="scss">
.detail-container {
  padding-bottom: 140rpx;
  background-color: #f7f9fc;

  .country-header {
    position: relative;
    height: 400rpx;
    overflow: hidden;

    .country-banner {
      width: 100%;
      height: 100%;
      filter: brightness(0.9);
    }

    .country-info {
      position: absolute;
      bottom: 40rpx;
      left: 40rpx;
      display: flex;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 20rpx 30rpx;
      border-radius: 50rpx;

      .country-flag {
        background-color: #fff;
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        border: 3rpx solid #fff;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
      }

      .country-name {
        font-size: 38rpx;
        font-weight: bold;
        color: #fff;
        margin-left: 20rpx;
        text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
      }
    }
  }

  .education-tabs {
    position: sticky;
    top: calc(44px + env(safe-area-inset-top));
    left: 0;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-bottom: 1rpx solid #e6e6e6;

    .tab-item {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      color: #666;
      padding: 30rpx 0;

      &.active {
        color: #3c9cff;
        font-weight: bold;
        border-bottom: 4rpx solid #3c9cff;
      }
    }
  }

  .section {
    margin: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 6rpx 24rpx rgba(60, 156, 255, 0.08);

    .section-title {
      font-size: 34rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
      padding-left: 16rpx;
      border-left: 8rpx solid #3c9cff;
      color: #333;
    }

    .fee-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      padding: 20rpx;
      background-color: #f7faff;
      border-radius: 12rpx;

      .fee-label {
        color: #666;
        width: 180rpx;
        font-size: 30rpx;
      }

      .fee-value {
        color: #ff6b00;
        font-weight: bold;
        font-size: 32rpx;
      }
    }

    .advantage-list {
      .advantage-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        padding: 20rpx;
        background-color: #f7faff;
        border-radius: 12rpx;
        font-size: 30rpx;

        text {
          margin-left: 16rpx;
          color: #555;
        }
      }
    }

    .option-group {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f0f0f0;

      .option-label {
        width: 180rpx;
        font-size: 30rpx;
        color: #666;
      }
    }

    .process-steps {
      .step-item {
        display: flex;
        margin-bottom: 24rpx;
        padding: 24rpx;
        background-color: #f7faff;
        border-radius: 12rpx;

        .step-index {
          width: 48rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          background: linear-gradient(135deg, #3c9cff, #5cb0ff);
          color: #fff;
          border-radius: 50%;
          margin-right: 24rpx;
          font-weight: bold;
          font-size: 28rpx;
        }

        .step-content {
          flex: 1;
          font-size: 30rpx;
          color: #555;
          padding-top: 8rpx;
        }
      }
    }
  }

  .footer-buttons {
    position: fixed;
    gap: 20rpx;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    padding: 20rpx 30rpx;
    background-color: #fff;
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
    z-index: 10;

    .up-button {
      flex: 1;
      margin: 0 15rpx;
      height: 90rpx;
      font-size: 32rpx;
      border-radius: 12rpx;

      &:first-child {
        background: linear-gradient(135deg, #3c9cff, #5cb0ff);
        box-shadow: 0 4rpx 12rpx rgba(60, 156, 255, 0.3);
      }

      &:last-child {
        border: 1rpx solid #3c9cff;
        color: #3c9cff;
      }
    }
  }
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin: 0 10rpx;

  .process-card {
    padding: 30rpx 20rpx;
    background-color: #f7faff;
    border-radius: 16rpx;
    text-align: center;
    transition: all 0.3s ease;
    border: 1rpx solid #e6f0ff;
    position: relative;
    overflow: hidden;

    &.active {
      background: linear-gradient(135deg, #3c9cff, #5cb0ff);
      color: #fff;
      transform: translateY(-5rpx);
      box-shadow: 0 10rpx 20rpx rgba(60, 156, 255, 0.2);
      border-color: transparent;
    }

    .card-index {
      position: absolute;
      right: 10rpx;
      top: 10rpx;
      font-size: 60rpx;
      font-weight: 900;
      color: rgba(60, 156, 255, 0.1);
      line-height: 1;
      z-index: 1;

      &.active {
        color: rgba(255, 255, 255, 0.2);
      }
    }

    .card-content {
      position: relative;
      font-size: 28rpx;
      line-height: 1.4;
      font-weight: 500;
      z-index: 2;
    }
  }
}

// 优化弹窗样式
.process-modal {
  width: 80vw;
  max-width: 650rpx;
  padding: 30rpx;
  border-radius: 24rpx;
  background-color: #fff;

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;

    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .modal-content {
    padding: 0;

    .process-step {
      padding: 30rpx;
      background-color: #f7faff;
      border-radius: 16rpx;
      margin-bottom: 30rpx;

      .step-index {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        font-size: 80rpx;
        font-weight: 900;
        color: rgba(60, 156, 255, 0.1);
        line-height: 1;
      }

      .step-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #3c9cff;
        margin-bottom: 10rpx;
        padding-right: 80rpx;
      }

      .step-time {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 15rpx;
        padding-right: 80rpx;
      }

      .step-desc {
        font-size: 30rpx;
        line-height: 1.6;
        color: #555;
        padding-right: 80rpx;
      }
    }

    .process-tips {
      padding: 30rpx;
      background-color: #fff8f0;
      border-radius: 16rpx;
      border: 1rpx solid #ffe8cc;

      .tips-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #ff9900;
        margin-bottom: 20rpx;
      }

      .tips-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15rpx;
        font-size: 28rpx;
        color: #666;

        text {
          margin-left: 10rpx;
          flex: 1;
        }
      }
    }
  }

  .up-button {
    width: 100%;
    height: 80rpx;
    font-size: 32rpx;
    border-radius: 50rpx;
    margin-top: 30rpx;
  }
}
</style>
